<template>
  <div>
    <el-dialog :title="info.title" :visible.sync="info.isShow">
      <el-form :model="form">
        <el-form-item label="规格名称" :label-width="formLabelWidth">
          <el-input v-model="form.specsname"></el-input>
        </el-form-item>
        <el-form-item
          v-for="(item, index) in attrArr"
          :key="index"
          label="规格属性"
          :label-width="formLabelWidth"
        >
          <el-col :span="18">
            <el-input v-model="item.value"></el-input>
          </el-col>
          <el-button v-if="index === 0" type="primary" @click="add"
            >新增规格属性</el-button
          >
          <el-button v-else type="danger" @click="del(index)">删除</el-button>
        </el-form-item>
        <!-- <el-form-item label="规格属性" :label-width="formLabelWidth">
          <el-input v-model="form.attrs"></el-input>
          <el-button type="danger">删除</el-button>
        </el-form-item> -->

        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="form.status"
            active-color="blue"
            inactive-color="grey"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-if="info.isAdd" @click="confirm"
          >确 定</el-button
        >
        <el-button type="primary" @click="update" v-else>修 改</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
import { warningAlert, successAlert } from "../../../utils/alert";
import { specAdd, specOne } from "../../../request/api";
export default {
  props: ["info"],
  data() {
    return {
      form: {
        specsname: "",
        attrs: "",
        status: 1,
      },
      formLabelWidth: "70px",
      attrArr: [{ value: "" }],
    };
  },
  methods: {
    ...mapActions({
      requestSpecs: "goodsSpec/specListActions",
      requestCount: "goodsSpec/countActions",
      specUpdate: "goodsSpec/specUpdateActions",
    }),
    add() {
      this.attrArr.push({ value: "" });
    },
    del(index) {
      this.attrArr.splice(index, 1);
    },
    cancel() {
      this.info.isShow = false;
      this.form = {
        specsname: "",
        attrs: "",
        status: 1,
      };
      this.attrArr = [{ value: "" }];
    },
    confirm() {
      if (!this.attrArr.every((item) => item.value)) {
        warningAlert("规格属性不能为空");
        return;
      }
      // 处理规格属性，并存入form.attrs
      this.form.attrs = this.attrArr.map((item) => item.value).join(",");
      specAdd(this.form).then((res) => {
        if (res.code === 200) {
          successAlert(res.msg);
          this.cancel();
          this.requestCount();
          this.requestSpecs();
        }
      });
      this.cancel();
    },
    oneDetail(id) {
      specOne({ id }).then((res) => {
        if (res.code === 200) {
          this.form = res.list[0];
          this.form.id = id;
          this.attrArr = [];
          // 能用push就不要使用=，数组赋值和添加值的时候
          this.form.attrs.map((item) => this.attrArr.push({ value: item }));
          console.log(this.form.attrs);
          // let arr = this.form.attrs.map((item) => item).splice("");
          // console.log(this.form.attrs);
          // for (let i = 0; i < arr.length; i++) {
          //   this.attrArr[i] = { value: arr[i] };
          // }
          // console.log(this.attrArr);
          // console.log(this.form);
        }
      });
    },
    update() {
      this.form.attrs = this.attrArr.map((item) => item.value).join(",");
      this.specUpdate(this.form);
      this.requestCount();
      this.requestSpecs();
      this.cancel();
    },
  },
};
</script>
<style scoped>
</style>
